<template>
  <div class="step-wrap">
    <div :class="current ?'active': 'next'" class="step-item">1</div>
    <div :class="!current ?'active': 'next'" class="step-item">2</div>
  </div>
</template>
<script>
export default {
  name: 'Step',
  computed: {
    current() {
      return this.$route.path.indexOf('one') > -1
    }
  }
}
</script>
<style lang="scss" scoped>
.step-wrap {
  width: 100%;
  background-color: #fff;
  height: 50px;
  margin-bottom: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  .step-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 200px;
    font-size: 26px;
    font-weight: 500;
    color: #050505;
    border: 1px solid #e6e6e6;
    position: relative;
    &:nth-of-type(1) {
      &::after {
        content: '';
        width: 200px;
        height: 2px;
        background-color: #e6e6e6;
        position: absolute;
        right:-200px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .active {
    background-color: #409eff;
    color: #fff;
  }
}
</style>
